Upgrade @tanstack/charts to 0.18.0 and drop the dashed-grid workaround - #870

Bumps the charts catalog 0.16.0 → 0.18.0, measures what that costs, and adopts the one new
capability that deletes code we only wrote because the library lacked it.

The bump needs no source changes

@maple/ui and @maple/web both typecheck clean and all 661 + 2712 unit tests pass unmodified.
0.17 and 0.18 are additive where the type surface moved at all — selective rect corner radii,
radial gradients, ChartGuideLineStyle on grid/axis.line, a themeable focusRing, axis-title
typography, colorLegendItems. defineChart gained a branding symbol tightening its second
overload; nothing here trips on it.

It does not buy performance

Measured n=4 per version across test:perf:tanstack and test:perf:charts, alternating installs:

Every arm is at the floor on both versions — 0 dropped frames, 0 long tasks, 0 blocking ms — so
timings cannot resolve a paint-level win even if one exists. React commit counts are the honest
signal: discrete, and exactly reproducible. 21 of the 22 comparable lab arms report byte-identical
counts across the two versions. One does not.

The exception is a shipped chart. stacked-bar-production is QueryBuilderBarChart. 0.18
threads primaryPoint into the tooltip content context so a row can render itself active; under
focus: "group-x" the group is every series in a column, so the content now changes when the
nearest series flips inside a column rather than only when the column does. The
focus: "nearest" twin holds at 24, which is what isolates it. At this size it is 0.9ms per commit
with no dropped frame — it scales with series count.

We pay for it twice: PlotTooltip renders our own rows, so the active styling those commits buy
is never drawn, and nearest-series.ts computes the same answer itself for the emphasised row.
Reading primaryPoint instead would delete that helper and make the commits earn their keep — left
for its own change, because it touches the focus model.

Charts are lazy, so the startup budget is untouched (689.9 KB gzip, budget 690).

Adopted: the built-in grid can be dashed now

dashedGridY() existed for one reason, stated in its own docstring — grid was a boolean and
ChartTheme carried only a grid colour, so nothing anywhere could dash it, and under canvas a
.ts-chart__grid CSS rule cannot reach scene nodes. 0.18 takes a ChartGuideLineStyle on grid.

The mark is gone. plot-grid.ts shrinks to the one thing worth keeping in a single place — the
strokeDasharray: "3 3" the CartesianGrid drew — and 25 call sites across 23 files drop a
mark and gain grid: DASHED_Y_GRID on the y scale. The eight charts that build that scale through
timeseriesYAxis get it from the helper and drop the import. Stroke, width and the 0.11 opacity
are no longer restated: they were copied off the library's own grid group to begin with, and an
omitted field keeps the theme default.

Verified on the canvas renderer rather than assumed — sampling the scene canvas, the painted rules
alternate 3px on, 3px off. One test moved with it: createGrid styles each rule and leaves the
group on theme defaults, which is the opposite of where the mark put the dash.

Investigated and deliberately not adopted: bar corner radii

radius is a visual channel over RectCornerRadii now, so the rounding
query-builder-bar-chart.tsx documents as unavailable — top two corners, topmost stack segment
only — is finally expressible. It was built, and at the scene level it works: in jsdom the top
segment serialises with A2,2 arcs at its top corners and the segment beneath it with A0,0.

It does not paint on canvas, which is the renderer PlotFrame defaults to and the one
production uses. Sampling the scene canvas on /lab/charts?arm=stacked-bar-production, the topmost
bar row is full width at full alpha with no corner falloff at either an alpha > 8 or an
alpha > 128 threshold. dist/canvas.js does carry a cornerRadii branch, so this reads as an
SVG/canvas parity gap rather than a missing feature.

It would not have been free either: a radius function sets preferCornerRadii, so every bar
in a stacked chart leaves the rect element behind and serialises as a path, rounded or not —
and bar-domain-and-partials.test.tsx reads bar geometry off x/y/width/height in ten
places. Not worth a path-bounds helper for 2px that does not render. Reverted; recorded in FINDINGS
with the evidence.

colorLegendItems() was also checked and does not reopen the in-scene legend — ChartLegendPlacement
is still 'top' | 'bottom', so production's legend="right" stays inexpressible.

Verification

• bun run --filter=@maple/ui typecheck / --filter=@maple/web typecheck — clean
• packages/ui 661 tests, apps/web 2712 tests — pass
• bun run --cwd apps/web test:perf:tanstack and test:perf:charts — pass
• bun run --cwd apps/web check:bundle — 689.9 KB gzip against a 690 budget
• bun run lint, oxfmt on the changed files — clean
• Grid dash confirmed by canvas pixel sampling in the browser, not by screenshot

Full table, method and the canvas evidence are in
apps/web/src/lab/bench/tanstack/FINDINGS.md § "Version bump log".

🤖 Generated with Claude Code

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}

Summary by CodeRabbit

• Improvements

  • Standardized dashed horizontal grid lines across supported charts for more consistent visualization.
  • Grid styling is now applied through chart axes, preserving the dashed appearance in applicable dashboards and analytics views.

• Bug Fixes

  • Removed inconsistent or unused dashed grid lines from selected area, bar, histogram, and line charts.
  • Updated chart rendering to maintain correct dashed-line styling at the individual grid-rule level.